<head>
    <meta charset="UTF-8">
    <title>BootStrap+AngularJS分页显示 </title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css" />
    <script type="text/javascript" src="angular/angular.js"></script>
</head>

<body ng-app="paginationApp" ng-controller="paginationCtrl">
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">
                                <span class=" glyphicon glyphicon-plus">
                                </span>
    添加
</button>
<table class="table table-bordered">
    <tr>
        <th>序号</th>
        <th>id</th>
        <th>城市名</th>
        <th>大学名</th>
        <th>编辑</th>
        <th>删除</th>
    </tr>
    <tr ng-repeat="product in products">
        <td>{{$index+1}}</td>
        <td>{{product.sh_id}}</td>
        <td>{{product.sh_city}}</td>
        <td>{{product.sh_shool}}</td>
        <td>
            <button class="btn btn-default btn-sm" ng-click="editShool(product)" data-toggle="modal" data-target="#myModal">编辑</button>
        <td>
            <button class="btn btn-default btn-sm" ng-click="deleteShool(product.sh_id)">删除</button>
        </td>
    </tr>
</table>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">编辑</h4>
            </div>
            <div class="modal-body">
                <form class="col-md-12">
                    <span class="help-block col-md-2">城市名称</span>
                    <div class="form-group col-md-10">
                        <input type="text" class="form-control" ng-model="shools.sh_city" />
                    </div>
                    <span class="help-block col-md-2">院校名称</span>
                    <div class="form-group col-md-10">
                        <input type="text" class="form-control" ng-model="shools.sh_shool" />
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" ng-click="saveShool(shools)">保存</button>
            </div>
        </div>
    </div>
</div>

<div>
    <ul class="pagination pull-right">
        <li>
            <a href ng-click="prev()">上一页</a>
        </li>
        <li ng-repeat="page in pageList" ng-class="{active: isActivePage(page)}">
            <a href ng-click="selectPage(page)">{{page}}</a>
        </li>
        <li>
            <a href ng-click="next()">下一页</a>
        </li>
    </ul>
</div>
</body>

<script type="text/javascript ">
    var paginationApp = angular.module("paginationApp", []);
    paginationApp.controller("paginationCtrl", ["$scope", "$http",
        function($scope, $http) {
            $scope.shools = {
                sh_id:'',
                sh_city:'',
                sh_shool:'',
            }
            // $scope.sh_city = '';
            // $scope.sh_shool = '';
            // $scope.sh_id = '';

            $scope.editShool = function (product) {
                $http.get('http://192.168.8.87:8080/getById/'+product.sh_id)
                    .success(function (Data) {
                        $scope.shools.sh_city = Data.data.sh_city;
                        $scope.shools.sh_shool = Data.data.sh_shool;
                        $scope.shools.sh_id = Data.data.sh_id;
                    });
                // console.log("编辑"+product)
            };

            $scope.deleteShool = function (id) {
                $http.delete('http://192.168.8.87:8080/delete/'+id)
                    .success(function (Data) {
                        console.info(Data);
                        if (Data.code === 200){
                            alert("删除成功!");
                            $scope.selectPage(1);
                            $scope.shools = {}
                        }
                    });
                // console.log("删除"+id)
            };
            $('#myModal').on('hidden.bs.modal', function (e) {
                // do something...
                $scope.shools = {}
                console.log($scope.shools)
            })
            $scope.saveShool = function (shool) {
                // console.log(shool);
                if (shool.sh_id !== '' && shool.sh_id > 0){
                    $http.put('http://192.168.8.87:8080/update?sh_id='+shool.sh_id+'&sh_city='+shool.sh_city+'&sh_shool='+shool.sh_shool)
                        .success(function (Data) {
                            if (Data.code === 200){
                                alert("修改成功!");
                                $('#myModal').modal('hide');
                                $scope.selectPage(1);
                                $scope.shools = {}
                            }
                            console.info(Data);
                        });
                    // console.log("修改")
                }else {
                    $http.post('http://192.168.8.87:8080/add?sh_city='+shool.sh_city+'&sh_shool='+shool.sh_shool)
                        .success(function (Data) {
                            if (Data.code === 200){
                                alert("添加成功!");
                                $('#myModal').modal('hide');
                                $scope.selectPage(1);
                                $scope.shools = {}
                            }
                        });
                    // console.log("添加事件!");
                }
                // console.log("保存------>"+shool)
            };

            // 分页组件 必须变量
            $scope.currentPage = 1; // 当前页 （请求数据）
            $scope.pageSize = 4; // 每页记录数 （请求数据）
            $scope.totalCount = 0; // 总记录数 （响应数据）
            $scope.totalPages = 0; // 总页数 （根据 总记录数、每页记录数 计算 ）

            // 要在分页工具条显示所有页码
            $scope.pageList = new Array();


            // 加载上一页数据
            $scope.prev = function(){
                $scope.selectPage($scope.currentPage-1);
            }

            // 加载下一页数据
            $scope.next = function(){
                $scope.selectPage($scope.currentPage+1);
            }

            // 加载指定页数据
            $scope.selectPage = function(page) {
                // debugger;
                // page 超出范围
                if($scope.totalPages != 0 && (page < 1 || page > $scope.totalPages)){
                    return ;
                }

                $http({
                    method: 'GET',
                    url: 'http://192.168.8.87:8080/getList',
                    params: {
                        pageNumber : page , // 页码
                        pageSize : $scope.pageSize // 每页记录数
                    }
                }).success(function(data, status, headers, config) {
                    // 显示表格数据
                    $scope.products = data.data.list;
                    // 根据总记录数 计算 总页数
                    $scope.totalCount = data.total;
                    $scope.totalPages = Math.ceil($scope.totalCount / $scope.pageSize);
                    // 更新当前显示页码
                    $scope.currentPage = page ;

                    // 显示分页工具条中页码
                    var begin ; // 显示第一个页码
                    var end ;  // 显示最后一个页码

                    // 理论上 begin 是当前页 -5
                    begin = $scope.currentPage - 5 ;
                    if(begin < 1){ // 第一个页码 不能小于1
                        begin = 1 ;
                    }

                    // 显示10个页码，理论上end 是 begin + 9
                    end = begin + 9;
                    if(end > $scope.totalPages ){// 最后一个页码不能大于总页数
                        end = $scope.totalPages;
                    }

                    // 修正begin 的值, 理论上 begin 是 end - 9
                    begin = end - 9;
                    if(begin < 1){ // 第一个页码 不能小于1
                        begin = 1 ;
                    }

                    //注意清空数组,否则会重复,并且页码始终是那么几个
                    $scope.pageList.length=0;

                    // 将页码加入 PageList集合
                    for(var i=begin ; i<= end ;i++){
                        $scope.pageList.push(i);
                    }

                }).error(function(data, status, headers, config) {
                    // 当响应以错误状态返回时调用
                    alert("出错，请联系管理员 ");
                });
            }

            // 判断是否为当前页
            $scope.isActivePage = function(page) {
                return page === $scope.currentPage;
            }

            // 初始化，选中第一页
            $scope.selectPage(1);


        }
    ]);
</script>
